import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Table, Col } from 'antd';
import { NavLink, useNavigate } from 'react-router-dom'
import { getServerList, optionlist, getPackName, findStatusName, teamlist, findByType, serachName } from '../../../../api/Service'
import Header from '../../../../component/Serve/Header/Header';
import ExportJsonExcel from "js-export-excel"
import './servePending.scss'
interface Props {

}
function ServePending(props: Props) {
    const navigate = useNavigate()
    const { Search } = Input;
    //页面数据
    const [data, setData] = useState([])
    //分页
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 8, total: data.length });
    //搜索需要的单个数据
    var [signPending, setSignPending] = useState<string>("")
    var [organization, setOrganization] = useState<string>("")
    var [serverTeam, setServerTeam] = useState<string>("")
    var [server, setServer] = useState<string>("")
    var [name, setName] = useState<string>("")
    //下拉框数据
    var [organName, setOrganName] = useState([])
    var [packName, setPackName] = useState([])
    var [statusName, setStatusName] = useState<any>([])
    var [dteamName, setDteamName] = useState([])

    //初始化加载
    useEffect(() => {
        getName()
        getList()
    }, [])
    //获取表格数据
    var getList = async () => {
        var res = await getServerList()
        var newarr = setList(res.data.data)
        console.log(res.data.data);
        
        console.log(newarr);
        
        setData(newarr)
    }
    //合并数据函数
    var setList = (arr: any) => {
        var newarr = arr.map((item: any) => { return { ...item[1], ...item[0], ...item[2] } })
        return newarr
    }
    //获取下拉框数据
    var getName = async () => {
        var res1 = await teamlist()//医生团队  
        setDteamName(res1.data.data.map((item: any) => { return { value: item.teamId, label: item.teamName } }))
        var res2 = await getPackName()//服务包
        setPackName(res2.data)
        var res3 = await findStatusName()//状态
        var res4 = res3.data.data.map((item: any) => { return { value: item.ssId, label: item.ssName } })
        setStatusName(res4.filter((item: any) => item.value != 4 && item.value != 5))
        var res = await optionlist()//机构
        setOrganName(res.data.data.map((item: any) => { return { value: item.mechanismId, label: item.mechanismName } }))
        var res1 = await teamlist()//医生团队  
        setDteamName(res1.data.data.map((item: any) => { return { value: item.teamId, label: item.teamName } }))
    }
    //表单验证通过提交
    const onFinish = async (values: any) => {
        console.log(values);
    };
    //点击搜索
    const onSearch = async (value: any) => {
        var res = await serachName({ name: value })
        setData(setList(res.data.data))
    };
    //表格列数据
    const columns: any = [
        { title: '编号', dataIndex: 'serviceId', key: 'serviceId' },
        { title: '姓名', dataIndex: 'residentName', key: "residentName" },
        { title: '身份证号', dataIndex: 'residentNumber', key: "residentNumber" },
        { title: '手机号码', dataIndex: 'residentPhone', key: "residentPhone" },
        {
            title: '服务状态',
            dataIndex: 'serviceStatus',
            key: "serviceStatus",
            render: (serviceStatus: any) => {
                return <span style={{ color: serviceStatus == 1 ? "#3DD4A7" : "" || serviceStatus == 3 ? "#FA746B" : "" || serviceStatus == 2 ? "#FDDB78" : "" }}>{statusName.map((item: any) => item.value == serviceStatus && item.label)}</span>
            }
        },
        {
            title: '服务包', dataIndex: 'packageId', key: "packageId",
            render: (packageId: any) => {
                return packName.map((item: any) => { return item.value == packageId && item.label })
            }
        },
        { title: '服务项目', dataIndex: 'projectName', key: "projectName" },
        { title: '申请时间', dataIndex: 'serviceSubmit', key: "serviceSubmit", },
        {
            title: '操作',
            key: "handle",
            render: (id: any) => {
                return (<>
                    <NavLink to="/index/serve-detail" state={id}>查看详情</NavLink>
                    <NavLink to="/index/serve-edit" state={id}>编辑</NavLink>
                </>)
            }
        },
    ];
    //选中复选框时
    const onSelectChange = (newSelectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    //选中复选框
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //分页发生改变后执行,pagi是最新的页码数据,是个对象 current:1,pageSize:5,total:100 },拿到最新的对象再去发请求
    const handleChange = (pagi: any) => {
        setPagination(pagi) //更新页码
    }

    //下拉搜索对应数据
    var onSignPendingChange = async (str: string, value: any) => {
        setSignPending(value)
        var res = await findByType({ "serviceStatus": value, "mechanismId": organization, "teamId": serverTeam, "packageId": server })
        setData(setList(res.data.data))
    }
    //下拉搜索对应数据
    var onOrganizationChange = async (str: string, value: any) => {
        setOrganization(value)
        var res = await findByType({ "serviceStatus": signPending, "mechanismId": value, "teamId": serverTeam, "packageId": server })
        setData(setList(res.data.data))
    }
    //下拉搜索对应数据
    var onServerTeamChange = async (str: string, value: any) => {
        setServerTeam(value)
        var res = await findByType({ "serviceStatus": signPending, "mechanismId": organization, "teamId": value, "packageId": server })
        setData(setList(res.data.data))
    }
    //下拉搜索对应数据
    var onServerChange = async (str: string, value: any) => {
        setServer(value)
        var res = await findByType({ "serviceStatus": signPending, "mechanismId": organization, "teamId": serverTeam, "packageId": value })
        setData(setList(res.data.data))
    }

    let excel = () => {//导出Excel表
        let sheetFilter = ["serviceId", "residentName", 'residentNumber', 'residentPhone', 'serviceStatus',"packageId","projectName","serviceSubmit"]//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "待处理服务列表";
        option.datas = [
            {
                sheetData: data,//需要导出的数据
                sheetName: "待处理服务列表",
                sheetFilter: sheetFilter,
                sheetHeader: ["编号", "姓名", "身份账号", "手机号", "服务状态","服务包","服务项目","申请时间"],//每一列的列头
                columnWidth: [20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();
    }

    return (
        <div className='servePending'>
            <div className="main">
                <Header txt="待处理服务"></Header>
                <Form
                    name="basic"
                    layout="inline"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Col span={6}>
                        <Form.Item
                            label="服务状态"
                            name="serviceStatus"
                        >
                            <Select
                                placeholder="请选择"
                                allowClear
                                options={statusName}
                                onChange={(value) => { onSignPendingChange("serviceStatus", value) }}
                            >
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item
                            label="签约机构"
                            name="mechanismId"
                        >
                            <Select
                                placeholder="请选择"
                                allowClear
                                options={organName}
                                onChange={(value) => { onOrganizationChange("mechanismId", value) }}
                            >
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item
                            label="医生团队"
                            name="teamId"
                        >
                            <Select
                                placeholder="请选择"
                                allowClear
                                options={dteamName}
                                onChange={(value) => { onServerTeamChange("teamId", value) }}
                            >
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={4}>
                        <Form.Item>
                            <Button type="primary" onClick={() => { navigate("/index/serve-add") }}>新增服务</Button>
                            <Button onClick={excel}>导出</Button>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Form.Item
                            label="服务包"
                            name="packageId"
                        >
                            <Select
                                placeholder="请选择"
                                allowClear
                                options={packName}
                                onChange={(value) => { onServerChange("packageId", value) }}
                            >
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col span={6}>
                        <Search placeholder="请输入关键字" onSearch={onSearch} enterButton />
                    </Col>
                </Form>

                <div className="table">
                    <Table columns={columns} size="small" dataSource={data} rowSelection={rowSelection} pagination={pagination} onChange={(pagi) => { handleChange(pagi) }} rowKey={(record: any) => record.id} />
                </div>
            </div>

        </div>
    );
}

export default ServePending;